
<template>
<!-- vue的模板里面 所有的内容要被一个根节点包含起来  -->
<!-- 双向数据绑定v-model -->
  <div id="store">  
<!-- keyup 键盘事件 要知道当前是不是在按回车键enter--$event -->
<input type="text" v-model="todo" @keyup="addData($event)">
    <button @click="addData($event)">+增加</button>
    <br>
        <hr>
            <br>
                <ul>
                    <li v-for="(item,key) in list">
                        <input type="checkbox" v-model="item.status">
                            {{item}}
                            --------
                            <button @click="removeData(key)">-删除</button>
                        </li>
                    </ul>
                    <br>
                        <h2>进行中</h2>
                        <ul>
                            <li v-for="(item,key) in list" v-if="!item.status">
                                <input type="checkbox" v-model="item.status" @change="saveList()">
                                    {{item}}
                                    --------
                                    <button @click="removeData(key)" >-删除</button>
                                </li>
                            </ul>
                            <br>
                                <h2>已完成</h2>
                                <ul class="finish">
                                    <li v-for="(item,key) in list" v-if="item.status">
                                        <input type="checkbox" v-model="item.status"  @change="saveList()" >
                                            {{item}}
                                            --------
                                            <button @click="removeData(key)">-删除</button>
                                        </li>
                                    </ul>

                                </div>
                   </template>

<script>
import storageCore from './storage'
    export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          // 添加属性 文本框添加的内容
          isCheck:false,//复选框的状态标志bool
          todo: '',
          list:[]
        } 
      },
      // 生命周期函数 vue页面刷新就会触发的方法---钩子函数
      mounted(){
        // 从本地数据库 获取list对象然后json解析
      //  let listArr = JSON.parse(localStorage.getItem('list'));
      let listArr = storageCore.get('list');
       if(listArr)
       {
         this.list = listArr;
       }
      },

      methods:{ 
        //对象改变时调用
        saveList(){
                  //本地数据缓存 对象转为json格式的字符串
          //  localStorage.setItem('list',JSON.stringify(this.list));
           storageCore.set('list',this.list);
        },
        doSomething(){
         alert('key up');
        },
        removeData(obj){
          //delete key条数据
          this.list.splice(obj,1);
           //本地数据缓存 对象转为json格式的字符串
          //  localStorage.setItem('list',JSON.stringify(this.list));
          storageCore.set('list',this.list);
        },
        addData(option){
             console.log(option);
            if(this.todo.length != 0)
            {
              // if 按了回车add数据到数组 
              if(option.keyCode == 13 || option.pointerType === "mouse")
              {
                     //获取文本框输入的值  push到list中
                 this.list.push({'content':this.todo,'status':this.isCheck});
                 this.todo = '';

                 //本地数据缓存---------对象转为json格式的字符串
                 localStorage.setItem('list',JSON.stringify(this.list));
              }
         

            }
        }
      }
    }
</script>





<style lang="scss">
.finish li{
  background-color: red;
  list-style: none;
}
</style>
